<template>
	<div class="container">
		<!--<span>请选择日期</span>-->
		<!--选择日期-->
		<!--<el-date-picker v-model="value1" :editable="editable" type="date" value-format="yyyyMMdd" @change="chooseDate" :placeholder="newDate">
		</el-date-picker>-->
		<div class="clearfix nav">
			<span>收藏列表</span>
			<button @click="allDelete" class="allDelete ">一键清空</button>
		</div>
		
		<div class="content">
			<div v-for="(item,index) in questionList" class="quesBox clearfix" @click="clickQuestion(item)" :class="{active:currentQuestionId==item.id}">
				<span>{{ (currentpage-1)*15+index+1 }}.</span>
				<div>
					<div v-html="item.body"></div>
					<div v-if="currentQuestionId==item.id">
						<span>正确答案：</span>
						<div v-html="item.answer"></div>
						<span>解析：</span>
						<div v-html="item.analysis" class="analysis"></div>
					</div>
				</div>
				<button @click="deleteQues(item,index,$event)" class="deleteSpan">删 &nbsp;除</button>
			</div>
			<p v-if="noData">您还没有收藏题目</p>
		</div>
		<el-pagination class="pagination" v-if="showPagina" background layout="prev, pager, next" :page-size="15" :current-page="currentpage" :total="total" @current-change="changePage"></el-pagination>
	</div>
</template>

<script>
	import api from '../api'
	import { getSeriDate } from '../util/util'
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				loading: true,
				total: 0,
				currentpage: 1,
				tidsList: [],
				tidsDetailList: [],
				dayfrom: '',
				dayto: '',
				daytoNum: 0,
				tidsInterArr: [],
				tidsDetailInterArr: [],
				questionList: [],
				currentQuestionId: 0,
				value1: '',
				editable: false,
				newDate: '',
				showPagina: false,
				noData: false

			}
		},
		created() {
			var that = this;
			this.newDate = getSeriDate()
			this.getTeacherFavoriteList();
			this.INIT_STATE();
		},
		computed: {
			...mapState(["userlogin"])
		},
		methods: {
			...mapMutations(["INIT_STATE"]),
			split_Arr(arr, len) {
				var result = [];
				for(var i = 0; i < arr.length; i += len) {
					result.push(arr.slice(i, i + len))
				}
				return result
			},
			getTeacherFavoriteList() {
				var that = this;
				//重置分页
				this.currentpage = 1;
				return api.getTeacherFavoriteList({
					teacherid: this.userlogin.id,
					courseid: 0
				}).then(response => {
					if(response.data.data.testids) {
						that.noData = false;
						that.tidsList = response.data.data.testids.split(',')
						that.tidsDetailList = response.data.data.favoriteList;
						that.total = that.tidsList.length;
						//进行裁切
						that.tidsInterArr = that.split_Arr(that.tidsList, 15);
						that.tidsDetailInterArr = that.split_Arr(that.tidsDetailList, 15);
						//从跨学网获取试题信息
						that.getQuestionList()
						if(that.tidsList.length > 15) {
							//显示分页
							that.showPagina = true
						} else {
							//不显示分页
							that.showPagina = false
						}
						return Promise.resolve()
					} else {
						that.questionList=[];
						that.loading = false;
						that.noData = true;
					}
				})
			},
			changePage(page) {
				this.loading = true;
				this.currentpage = page;
				//要根据已经缓存的题目id重新获取题目数据
				this.getQuestionList();
			},
			getQuestionList() {
				var that = this;
				api.getListQuestionById(this.tidsInterArr[this.currentpage - 1].join(',')).then(response => {
					that.questionList = response.data.datalist;
					//讲题目按照传入的顺序进行排序且补上fid信息
					that.questionList = that.tidsDetailInterArr[this.currentpage - 1].map(function(item, index) {
						return that.questionList.find(function(v) {
							if(v.id == item.testid) {
								v['fid'] = item.id;
								return v
							}
						})
					})
					that.loading = false;
				})
			},
			clickQuestion(item) {
				if(this.currentQuestionId == item.id) {
					this.currentQuestionId = 0
				} else {
					this.currentQuestionId = item.id
				}
			},
			deleteQues(item, index,event) {
				event.stopPropagation();
				var that = this;
				api.deleteTeacherFavorite({
					teacherid: this.userlogin.id,
					fid: item.fid
				}).then(response => {
					that.questionList.splice(index, 1)
					//删除对应的题id分割数组里的值
					that.tidsInterArr[that.currentpage - 1].splice(index, 1)
					that.tidsDetailInterArr[that.currentpage - 1].splice(index, 1)
					
				})
			},
			allDelete(){
				var that = this;
				api.deleteTeacherFavorite({
					teacherid: this.userlogin.id
				}).then(response => {
					that.getTeacherFavoriteList();	
					that.showPagina=false;
				})
			},
			chooseDate(data) {
				if(data) {
					this.loading = true;
					//刷新数据
					this.newDate = data;
					this.questionList = [];
					this.showPagina = false;
					this.getTeacherFavoriteList()
				}

			}

		}
	}
</script>

<style scoped>
	.container {
		cursor: default;
	}
	.container>.nav{
		background: #F5FAFC;
		height: 48px;
		line-height: 48px;
	}
	.container>.nav>span{
		font-size: 16px;
		font-weight: bold;
		padding-left: 30px;
	}
	.container>.content {}
	
	.container>.content>p {
		text-align: center;
		line-height: 120px;
		letter-spacing: 2px;
	}
	
	.quesBox {
		padding-top: 20px;
		padding-left: 16px;
		min-height: 80px;
		border-bottom: 1px dashed #f2f2f2;
		position: relative;
		display: flex;
		justify-content: space-between;
		padding-bottom: 26px;
	}
	
	.quesBox>span {
		flex: 1;
		position: absolute;
		top: 25px;
	}
	
	.quesBox>h4 {
		line-height: 40px;
		color: #1dbc59;
	}
	
	.quesBox>.analysis {}
	
	.quesBox.active {
		border: 1px solid #999999;
	}
	
	.quesBox>div {
		flex: 8;
		padding-left: 8px;
		text-indent: 16px;
		line-height: 26px;
	}
	.quesBox>div>div>span{
		font-weight: bold;
		color: #14ACF4;
		font-size: 14px;
	}
	.quesBox>.deleteSpan {
		width: 80px;
		height: 30px;
		background-color: #14acf4;
		color: white;
		line-height: 30px;
		margin-top: 15px;
		margin-left: 30px;
		font-size: 14px;
		text-decoration: none;
		border: none;
		text-align: center;
		margin-right: 16px;
	}
	.quesBox>.deleteSpan:hover{
		cursor: pointer;
		background-color: rgba(20,172,244,0.8)
	}
	.pagination {
		float: right;
		margin-top: 30px;
		margin-bottom: 40px;
	}
	.allDelete{
		float: right;
		margin-top: 9px;
		width: 80px;
		padding: 0;
		height: 30px;
		margin-right: 20px;
		color: white;
		background-color: #FFAA60;
		outline: none;
		border: none;
	}
	.allDelete:hover{
		cursor: pointer;
		background-color: rgba(255,170,96,0.8);
	}
</style>